<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="https://kkgithub.com/extdomains/cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            padding-bottom: 50px;
            background-color: #f5f7fa;
            color: #333;
        }
        
        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(135deg, #2c3e50, #1a2530);
            overflow: hidden;
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .navbar a {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #e0e0e0;
            text-align: center;
            padding: 14px 5px;
            text-decoration: none;
            font-size: 15px;
            min-width: 90px;
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent;
        }
        
        .navbar a i {
            margin-bottom: 5px;
            font-size: 20px;
        }
        
        .navbar a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }
        
        .navbar a.active {
            color: white;
            border-bottom: 3px solid #4CAF50;
            background-color: rgba(76, 175, 80, 0.15);
        }
        
        /* 内容区域样式 */
        .content {
            padding: 20px;
            margin-top: 10px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* 表单样式 */
        .book-form {
            max-width: 600px;
            margin: 20px auto;
            padding: 25px;
            border-radius: 10px;
            background: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }
        
        .form-header {
            text-align: center;
            margin-bottom: 25px;
            color: #2c3e50;
            position: relative;
        }
        
        .form-header:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(to right, #4CAF50, #2E7D32);
            border-radius: 3px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .form-group input, .form-group select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .form-group input:focus, .form-group select:focus {
            border-color: #4CAF50;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
            outline: none;
        }
        
        .button-group {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }
        
        button {
            flex: 1;
            background-color: #4CAF50;
            color: white;
            padding: 12px 15px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        button:hover {
            background-color: #3d8b40;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        button.delete {
            background-color: #f44336;
        }
        
        button.delete:hover {
            background-color: #d32f2f;
        }
        
        button.borrowed {
            background-color: #ff9800;
        }
        
        button.borrowed:hover {
            background-color: #e68a00;
        }
        
        button.secondary {
            background-color: #607d8b;
        }
        
        button.secondary:hover {
            background-color: #546e7a;
        }
        
        /* 图书列表样式 */
        .book-list {
            margin-top: 30px;
            overflow-x: auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            padding: 20px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        th, td {
            border: 1px solid #e0e0e0;
            padding: 14px;
            text-align: left;
        }
        
        th {
            background-color: #2c3e50;
            color: white;
            font-weight: 600;
        }
        
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        tr:hover {
            background-color: #f0f7ff;
        }
        
        /* 隐藏内容区域 */
        .hidden {
            display: none;
        }
        
        /* 操作按钮单元格 */
        .actions {
            white-space: nowrap;
            display: flex;
            gap: 8px;
        }
        
        .actions button {
            padding: 8px 12px;
            font-size: 14px;
        }
        
        /* 状态标签 */
        .status {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
        }
        
        .status-available {
            background-color: #e8f5e9;
            color: #2e7d32;
        }
        
        .status-borrowed {
            background-color: #ffebee;
            color: #c62828;
        }
        
        /* 搜索框样式 */
        .search-container {
            display: flex;
            gap: 15px;
            margin: 20px 0;
        }
        
        .search-container input {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .search-container input:focus {
            border-color: #4CAF50;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
            outline: none;
        }
        
        .stats-container {
            display: flex;
            gap: 20px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        
        .stat-card {
            flex: 1;
            min-width: 200px;
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            text-align: center;
            border-top: 4px solid #4CAF50;
        }
        
        .stat-card h3 {
            font-size: 18px;
            color: #555;
            margin-bottom: 10px;
        }
        
        .stat-card .value {
            font-size: 32px;
            font-weight: 700;
            color: #2c3e50;
        }
        
        /* 通知消息 */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            border-radius: 8px;
            color: white;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            transform: translateX(120%);
            transition: transform 0.4s ease;
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        .notification.success {
            background: linear-gradient(135deg, #4CAF50, #2E7D32);
        }
        
        .notification.error {
            background: linear-gradient(135deg, #f44336, #c62828);
        }
        
        .notification.info {
            background: linear-gradient(135deg, #2196F3, #1565C0);
        }
        
        /* 响应式设计 */
        @media screen and (max-width: 768px) {
            .navbar a {
                font-size: 13px;
                min-width: 70px;
                padding: 10px 3px;
            }
            
            .navbar a i {
                font-size: 18px;
            }
            
            .button-group {
                flex-direction: column;
            }
            
            .actions {
                flex-direction: column;
            }
            
            .stat-card {
                min-width: 100%;
            }
            
            th, td {
                padding: 10px 8px;
                font-size: 14px;
            }
        }
        
        @media screen and (max-width: 480px) {
            .content {
                padding: 10px;
            }
            
            .book-form {
                padding: 15px;
            }
            
            .form-group input, .form-group select {
                padding: 10px 12px;
            }
            
            .search-container {
                flex-direction: column;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease forwards;
        }
    </style>
</head>
<body>
    <!-- 通知容器 -->
    <div id="notification" class="notification"></div>
    
    <div class="navbar">
        <a class="active" href="#" onclick="showSection('home', this)">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" onclick="showSection('list', this)">
            <i class="fas fa-book"></i>
            <span>图书列表</span>
        </a>
        <a href="#" onclick="showSection('administration', this)">
            <i class="fas fa-tasks"></i>
            <span>图书管理</span>
        </a>
        <a href="#" onclick="showSection('about', this)">
            <i class="fas fa-info-circle"></i>
            <span>关于</span>
        </a>
    </div>
    
    <div class="content">
        <!-- 首页内容 -->
        <div id="home-section" class="fade-in">
            <div style="max-width: 1000px; margin: 0 auto; padding: 20px;">
                <!-- 标题部分 -->
                <div style="text-align: center; margin-bottom: 30px;">
                    <h1 style="color: #2c3e50; font-size: 2.5em; margin-bottom: 10px;">图书管理系统</h1>
                    <p style="color: #666; font-size: 1.2em;">高效管理您的图书收藏与借阅记录</p>
                </div>
                
                <!-- 欢迎语 -->
                <div style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9); padding: 25px; border-radius: 12px; margin-bottom: 30px; border-left: 5px solid #4CAF50;">
                    <h2 style="color: #2e7d32; margin-top: 0;">欢迎使用图书管理系统</h2>
                    <p style="line-height: 1.8; font-size: 1.1em;">这是一个功能完善的图书管理系统，可以帮助您轻松管理图书信息、跟踪借阅状态，让您的图书管理更加高效便捷。</p>
                </div>
                
                <!-- 功能说明 -->
                <div style="margin-bottom: 30px;">
                    <h2 style="color: #2c3e50; border-bottom: 2px solid #4CAF50; padding-bottom: 12px; margin-bottom: 20px;">主要功能</h2>
                    
                    <div style="display: flex; flex-wrap: wrap; gap: 25px; margin-top: 20px;">
                        <!-- 图书列表功能 -->
                        <div style="flex: 1; min-width: 250px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); border-top: 4px solid #4CAF50;">
                            <h3 style="margin-top: 0; color: #2c3e50; display: flex; align-items: center; gap: 10px;">
                                <i class="fas fa-list" style="color: #4CAF50;"></i> 图书列表
                            </h3>
                            <ul style="padding-left: 20px; line-height: 1.8; list-style-type: none;">
                                <li><i class="fas fa-check-circle" style="color: #4CAF50;"></i> 查看所有图书信息</li>
                                <li><i class="fas fa-check-circle" style="color: #4CAF50;"></i> 实时显示借阅状态</li>
                                <li><i class="fas fa-check-circle" style="color: #4CAF50;"></i> 强大的搜索功能</li>
                                <li><i class="fas fa-check-circle" style="color: #4CAF50;"></i> 借出/归还操作</li>
                            </ul>
                        </div>
                        
                        <!-- 图书管理功能 -->
                        <div style="flex: 1; min-width: 250px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); border-top: 4px solid #2196F3;">
                            <h3 style="margin-top: 0; color: #2c3e50; display: flex; align-items: center; gap: 10px;">
                                <i class="fas fa-cog" style="color: #2196F3;"></i> 图书管理
                            </h3>
                            <ul style="padding-left: 20px; line-height: 1.8; list-style-type: none;">
                                <li><i class="fas fa-check-circle" style="color: #2196F3;"></i> 添加新图书</li>
                                <li><i class="fas fa-check-circle" style="color: #2196F3;"></i> 编辑图书信息</li>
                                <li><i class="fas fa-check-circle" style="color: #2196F3;"></i> 删除图书记录</li>
                                <li><i class="fas fa-check-circle" style="color: #2196F3;"></i> 设置初始状态</li>
                            </ul>
                        </div>
                        
                        <!-- 数据分析功能 -->
                        <div style="flex: 1; min-width: 250px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); border-top: 4px solid #FF9800;">
                            <h3 style="margin-top: 0; color: #2c3e50; display: flex; align-items: center; gap: 10px;">
                                <i class="fas fa-chart-bar" style="color: #FF9800;"></i> 数据分析
                            </h3>
                            <ul style="padding-left: 20px; line-height: 1.8; list-style-type: none;">
                                <li><i class="fas fa-check-circle" style="color: #FF9800;"></i> 图书数量统计</li>
                                <li><i class="fas fa-check-circle" style="color: #FF9800;"></i> 借阅情况分析</li>
                                <li><i class="fas fa-check-circle" style="color: #FF9800;"></i> 类别分布图表</li>
                                <li><i class="fas fa-check-circle" style="color: #FF9800;"></i> 使用趋势报告</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- 快速开始 -->
                <div>
                    <h2 style="color: #2c3e50; border-bottom: 2px solid #4CAF50; padding-bottom: 12px; margin-bottom: 20px;">快速开始</h2>
                    <div style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); padding: 25px; border-radius: 12px; margin-top: 15px; border-left: 5px solid #2196F3;">
                        <p style="font-weight: bold; margin-bottom: 15px; font-size: 1.1em;">如何使用本系统：</p>
                        <ol style="padding-left: 25px; line-height: 1.8; font-size: 1.1em;">
                            <li>点击上方导航栏的<b style="color: #2196F3;">"图书管理"</b>添加新书</li>
                            <li>在<b style="color: #2196F3;">"图书列表"</b>中查看所有图书</li>
                            <li>点击<b style="color: #4CAF50;">"借出"</b>按钮记录借阅信息</li>
                            <li>图书归还时点击<b style="color: #F44336;">"归还"</b>按钮</li>
                            <li>在<b style="color: #FF9800;">"首页"</b>查看统计数据和系统状态</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 图书列表内容 -->
        <div id="list-section" class="hidden fade-in">
            <div class="section-header">
                <h1>图书列表</h1>
                <button onclick="exportBooks()" class="secondary">
                    <i class="fas fa-file-export"></i> 导出数据
                </button>
            </div>
            
            <div class="search-container">
                <input type="text" id="search-input" placeholder="搜索图书名称、作者、ISBN或类别..." onkeyup="searchBooks()">
                <button onclick="clearSearch()" class="secondary">
                    <i class="fas fa-times"></i> 清除搜索
                </button>
            </div>
            
            <div class="book-list">
                <table id="book-table">
                    <thead>
                        <tr>
                            <th>书名</th>
                            <th>作者</th>
                            <th>ISBN</th>
                            <th>类别</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="book-table-body">
                        <!-- 图书将通过JavaScript动态添加 -->
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 图书管理内容 -->
        <div id="administration-section" class="hidden fade-in">
            <h1>图书管理</h1>
            
            <div class="book-form">
                <div class="form-header">
                    <h2 id="form-title">添加新书</h2>
                </div>
                
                <input type="hidden" id="edit-index" value="-1">
                <div class="form-group">
                    <label for="book-title">书名: <span style="color: red;">*</span></label>
                    <input type="text" id="book-title" required>
                </div>
                <div class="form-group">
                    <label for="book-author">作者: <span style="color: red;">*</span></label>
                    <input type="text" id="book-author" required>
                </div>
                <div class="form-group">
                    <label for="book-isbn">ISBN: <span style="color: red;">*</span></label>
                    <input type="text" id="book-isbn" required>
                </div>
                <div class="form-group">
                    <label for="book-category">类别:</label>
                    <select id="book-category">
                        <option value="文学">文学</option>
                        <option value="科技">科技</option>
                        <option value="历史">历史</option>
                        <option value="艺术">艺术</option>
                        <option value="教育">教育</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="book-status">初始状态:</label>
                    <select id="book-status">
                        <option value="available">可借阅</option>
                        <option value="borrowed">已借出</option>
                    </select>
                </div>
                
                <div class="button-group">
                    <button onclick="saveBook()">
                        <i class="fas fa-save"></i> 保存图书
                    </button>
                    <button onclick="clearForm()" class="secondary">
                        <i class="fas fa-eraser"></i> 清空表单
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 关于内容 -->
        <div id="about-section" class="hidden fade-in">
            <h1>关于系统</h1>
            
            <div style="max-width: 800px; margin: 30px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);">
                <div style="text-align: center; margin-bottom: 30px;">
                    <i class="fas fa-book" style="font-size: 60px; color: #4CAF50; margin-bottom: 15px;"></i>
                    <h2 style="color: #2c3e50;">图书管理系统 v2.0</h2>
                </div>
                
                <div style="margin-bottom: 30px;">
                    <p style="line-height: 1.8; font-size: 17px; margin-bottom: 20px;">
                        这是一个基于浏览器的图书管理系统，使用HTML、CSS和JavaScript构建，数据存储在浏览器的localStorage中。系统提供了完整的图书管理功能，包括添加、编辑、删除图书，以及跟踪借阅状态等。
                    </p>
                    
                    <div style="display: flex; gap: 20px; flex-wrap: wrap; margin-top: 30px;">
                        <div style="flex: 1; min-width: 250px; background: #f9f9f9; padding: 20px; border-radius: 10px;">
                            <h3 style="color: #2c3e50; margin-top: 0; margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
                                <i class="fas fa-code" style="color: #2196F3;"></i> 技术栈
                            </h3>
                            <ul style="list-style-type: none; padding-left: 0;">
                                <li style="padding: 10px 0; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px;">
                                    <i class="fab fa-html5" style="color: #e44d26;"></i> HTML5
                                </li>
                                <li style="padding: 10px 0; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px;">
                                    <i class="fab fa-css3-alt" style="color: #264de4;"></i> CSS3
                                </li>
                                <li style="padding: 10px 0; display: flex; align-items: center; gap: 10px;">
                                    <i class="fab fa-js" style="color: #f0db4f;"></i> JavaScript (ES6)
                                </li>
                            </ul>
                        </div>
                        
                        <div style="flex: 1; min-width: 250px; background: #f9f9f9; padding: 20px; border-radius: 10px;">
                            <h3 style="color: #2c3e50; margin-top: 0; margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
                                <i class="fas fa-star" style="color: #FF9800;"></i> 主要特性
                            </h3>
                            <ul style="list-style-type: none; padding-left: 0;">
                                <li style="padding: 10px 0; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px;">
                                    <i class="fas fa-check" style="color: #4CAF50;"></i> 响应式设计
                                </li>
                                <li style="padding: 10px 0; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px;">
                                    <i class="fas fa-check" style="color: #4CAF50;"></i> 本地数据存储
                                </li>
                                <li style="padding: 10px 0; display: flex; align-items: center; gap: 10px;">
                                    <i class="fas fa-check" style="color: #4CAF50;"></i> 实时数据统计
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div style="background: #e8f5e9; padding: 20px; border-radius: 10px; margin-top: 30px; border-left: 4px solid #4CAF50;">
                    <h3 style="color: #2c3e50; margin-top: 0; display: flex; align-items: center; gap: 10px;">
                        <i class="fas fa-info-circle" style="color: #2196F3;"></i> 系统信息
                    </h3>
                    <ul style="list-style-type: none; padding-left: 0; margin-top: 15px;">
                        <li style="padding: 8px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #dcedc8;">
                            <span>版本:</span>
                            <strong>2.0.1</strong>
                        </li>
                        <li style="padding: 8px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #dcedc8;">
                            <span>最后更新:</span>
                            <strong>2025-6-23</strong>
                        </li>
                        <li style="padding: 8px 0; display: flex; justify-content: space-between;">
                            <span>开发者:</span>
                            <strong>Syner Trust</strong>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 存储图书数据的数组
        let books = [];
        let currentEditIndex = -1;
        
        // 页面加载时初始化
        window.onload = function() {
            loadBooks();
            showSection('home');
            updateStatistics();
        };
        
        // 显示通知
        function showNotification(message, type = 'success') {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.className = `notification ${type}`;
            notification.classList.add('show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
        
        // 从localStorage加载图书数据
        function loadBooks() {
            const savedBooks = localStorage.getItem('books');
            if (savedBooks) {
                try {
                    books = JSON.parse(savedBooks);
                } catch (e) {
                    books = [];
                    showNotification('图书数据加载失败，已重置', 'error');
                }
            }
            refreshBookList();
        }
        
        // 保存图书数据到localStorage
        function saveBooksToStorage() {
            localStorage.setItem('books', JSON.stringify(books));
        }
        
        // 更新统计数据
        function updateStatistics() {
            document.getElementById('total-books').textContent = books.length;
            
            const available = books.filter(book => book.status === 'available').length;
            document.getElementById('available-books').textContent = available;
            
            const borrowed = books.filter(book => book.status === 'borrowed').length;
            document.getElementById('borrowed-books').textContent = borrowed;
            
            const categories = new Set(books.map(book => book.category)).size;
            document.getElementById('book-categories').textContent = categories;
        }
        
        // 显示选中的内容区域
        function showSection(sectionId, element) {
            // 隐藏所有内容区域
            document.getElementById('home-section').classList.add('hidden');
            document.getElementById('list-section').classList.add('hidden');
            document.getElementById('administration-section').classList.add('hidden');
            document.getElementById('about-section').classList.add('hidden');
            
            // 移除所有导航链接的active类
            const navLinks = document.querySelectorAll('.navbar a');
            navLinks.forEach(link => link.classList.remove('active'));
            
            // 显示选中的内容区域
            const section = document.getElementById(`${sectionId}-section`);
            section.classList.remove('hidden');
            section.classList.add('fade-in');
            
            // 为当前导航链接添加active类
            element.classList.add('active');
            
            // 如果是列表页面，刷新图书列表
            if (sectionId === 'list') {
                refreshBookList();
            }
            
            // 如果是管理页面，清空表单
            if (sectionId === 'administration') {
                clearForm();
            }
            
            // 更新统计数据
            if (sectionId === 'home') {
                updateStatistics();
            }
        }
        
        // 保存图书（添加或更新）
        function saveBook() {
            const title = document.getElementById('book-title').value.trim();
            const author = document.getElementById('book-author').value.trim();
            const isbn = document.getElementById('book-isbn').value.trim();
            const category = document.getElementById('book-category').value;
            const status = document.getElementById('book-status').value;
            
            // 验证输入
            if (!title) {
                showNotification('书名不能为空', 'error');
                document.getElementById('book-title').focus();
                return;
            }
            
            if (!author) {
                showNotification('作者不能为空', 'error');
                document.getElementById('book-author').focus();
                return;
            }
            
            if (!isbn) {
                showNotification('ISBN不能为空', 'error');
                document.getElementById('book-isbn').focus();
                return;
            }
            
            // 检查ISBN是否已存在（编辑时排除当前图书）
            if (books.some((book, index) => 
                book.isbn === isbn && index !== currentEditIndex)) {
                showNotification('该ISBN已存在，请使用唯一ISBN', 'error');
                return;
            }
            
            const book = {
                title: title,
                author: author,
                isbn: isbn,
                category: category,
                status: status,
                borrower: status === 'borrowed' ? '未知' : null,
                borrowDate: status === 'borrowed' ? new Date().toLocaleDateString() : null
            };
            
            if (currentEditIndex === -1) {
                // 添加新书
                books.push(book);
                showNotification(`"${title}" 添加成功！`);
            } else {
                // 更新现有书籍
                books[currentEditIndex] = {
                    ...books[currentEditIndex],
                    title: title,
                    author: author,
                    isbn: isbn,
                    category: category
                };
                showNotification(`"${title}" 更新成功！`);
                currentEditIndex = -1;
                document.getElementById('edit-index').value = "-1";
                document.getElementById('form-title').textContent = "添加新书";
            }
            
            saveBooksToStorage();
            refreshBookList();
            clearForm();
            updateStatistics();
            showSection('list');
        }
        
        // 刷新图书列表
        function refreshBookList() {
            const tableBody = document.getElementById('book-table-body');
            tableBody.innerHTML = '';
            
            if (books.length === 0) {
                const row = document.createElement('tr');
                row.innerHTML = '<td colspan="6" style="text-align: center; padding: 30px; color: #666;">暂无图书数据，请添加图书</td>';
                tableBody.appendChild(row);
            } else {
                books.forEach((book, index) => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${book.title}</td>
                        <td>${book.author}</td>
                        <td>${book.isbn}</td>
                        <td>${book.category}</td>
                        <td>
                            <span class="status status-${book.status === 'available' ? 'available' : 'borrowed'}">
                                ${book.status === 'available' ? '可借阅' : '已借出'}
                            </span>
                            ${book.status === 'borrowed' ? `<div style="margin-top: 5px; font-size: 13px; color: #666;">借阅人: ${book.borrower || '未知'}<br>日期: ${book.borrowDate || '未知'}</div>` : ''}
                        </td>
                        <td class="actions">
                            <button onclick="toggleBookStatus(${index})" class="${book.status === 'borrowed' ? 'borrowed' : ''}">
                                <i class="${book.status === 'available' ? 'fas fa-sign-out-alt' : 'fas fa-undo'}"></i>
                                ${book.status === 'available' ? '借出' : '归还'}
                            </button>
                            <button onclick="editBook(${index})">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <button onclick="deleteBook(${index})" class="delete">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
        }
        
        // 切换书籍状态（借出/归还）
        function toggleBookStatus(index) {
            const book = books[index];
            
            if (book.status === 'available') {
                // 借出书籍
                const borrower = prompt('请输入借阅人姓名:', book.borrower || '');
                if (borrower === null) return;
                
                if (!borrower.trim()) {
                    showNotification('借阅人姓名不能为空', 'error');
                    return;
                }
                
                books[index] = {
                    ...book,
                    status: 'borrowed',
                    borrower: borrower.trim(),
                    borrowDate: new Date().toLocaleDateString()
                };
                
                saveBooksToStorage();
                refreshBookList();
                updateStatistics();
                showNotification(`"${book.title}" 已借出给 ${borrower.trim()}`);
            } else {
                // 归还书籍
                if (confirm(`确定要将《${book.title}》标记为已归还吗？`)) {
                    books[index] = {
                        ...book,
                        status: 'available',
                        borrower: null,
                        borrowDate: null
                    };
                    
                    saveBooksToStorage();
                    refreshBookList();
                    updateStatistics();
                    showNotification(`"${book.title}" 已成功归还`);
                }
            }
        }
        
        // 编辑图书
        function editBook(index) {
            const book = books[index];
            document.getElementById('book-title').value = book.title;
            document.getElementById('book-author').value = book.author;
            document.getElementById('book-isbn').value = book.isbn;
            document.getElementById('book-category').value = book.category;
            document.getElementById('book-status').value = book.status;
            
            currentEditIndex = index;
            document.getElementById('edit-index').value = index;
            document.getElementById('form-title').textContent = "编辑图书";
            
            showSection('administration');
            document.getElementById('book-title').focus();
        }
        
        // 删除图书
        function deleteBook(index) {
            const book = books[index];
            if (confirm(`确定要删除《${book.title}》吗？此操作不可撤销！`)) {
                books.splice(index, 1);
                saveBooksToStorage();
                refreshBookList();
                updateStatistics();
                showNotification(`"${book.title}" 已删除`, 'info');
            }
        }
        
        // 清空表单
        function clearForm() {
            document.getElementById('book-title').value = '';
            document.getElementById('book-author').value = '';
            document.getElementById('book-isbn').value = '';
            document.getElementById('book-category').value = '文学';
            document.getElementById('book-status').value = 'available';
            
            currentEditIndex = -1;
            document.getElementById('edit-index').value = "-1";
            document.getElementById('form-title').textContent = "添加新书";
            
            document.getElementById('book-title').focus();
        }
        
        // 搜索图书
        function searchBooks() {
            const input = document.getElementById('search-input');
            const filter = input.value.toUpperCase();
            const tableBody = document.getElementById('book-table-body');
            const rows = tableBody.getElementsByTagName('tr');
            
            for (let i = 0; i < rows.length; i++) {
                const cells = rows[i].getElementsByTagName('td');
                let found = false;
                
                for (let j = 0; j < cells.length - 1; j++) { // 排除操作列
                    const cell = cells[j];
                    if (cell) {
                        const txtValue = cell.textContent || cell.innerText;
                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
                            found = true;
                            break;
                        }
                    }
                }
                
                if (found) {
                    rows[i].style.display = '';
                } else {
                    rows[i].style.display = 'none';
                }
            }
        }
        
        // 清除搜索
        function clearSearch() {
            document.getElementById('search-input').value = '';
            searchBooks();
        }
        
        // 导出图书数据
        function exportBooks() {
            if (books.length === 0) {
                showNotification('没有可导出的图书数据', 'info');
                return;
            }
            
            // 创建CSV内容
            let csvContent = "书名,作者,ISBN,类别,状态,借阅人,借阅日期\n";
            
            books.forEach(book => {
                csvContent += `"${book.title}","${book.author}","${book.isbn}","${book.category}",`;
                csvContent += `${book.status === 'available' ? '可借阅' : '已借出'},`;
                csvContent += `"${book.borrower || ''}","${book.borrowDate || ''}"\n`;
            });
            
            // 创建下载链接
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            
            const now = new Date();
            const dateStr = `${now.getFullYear()}${(now.getMonth()+1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}`;
            
            link.setAttribute('href', url);
            link.setAttribute('download', `图书数据_${dateStr}.csv`);
            link.style.visibility = 'hidden';
            
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            showNotification('图书数据已导出为CSV文件', 'success');
        }
    </script>
</body>
</html>